<template>
	<view :class="[primarySize()]">
		<view class="container">
				
			<image src="https://admin.mosizp.cn/static/public/bg1.png" mode="aspectFill" class="bg"></image>
			<view class="pr z2 pt200 plr30 pb30">
				<view class="top_item">
					<view class="fwb col3 fs34 lh60 m-ellipsis-l2"><text
							class="tips">{{jobFairs.state_text}}</text>{{jobFairs.name}}</view>
					<view class="mt20 flex-box">
						<image src="https://admin.mosizp.cn/static/public/icon_time_b.png" mode="aspectFill" class="ico24"></image>
						<view class="pl20 flex-grow-1 col3 fs24">{{jobFairs.start_date_text}}至{{jobFairs.end_date_text}}</view>
					</view>
					<view class="mt20 flex-box">
						<image src="https://admin.mosizp.cn/static/public/icon_address_b.png" mode="aspectFill" class="ico24"></image>
						<view class="pl20 flex-grow-1 col3 fs24">{{jobFairs.address}}</view>
					</view>
					<view class="mt20 flex-box">
						<image src="https://admin.mosizp.cn/static/public/icon_company_b.png" mode="aspectFill" class="ico24"></image>
						<view class="pl20 flex-grow-1 col3 fs24">企业{{jobFairs.company_count}} ｜ 岗位{{jobFairs.job_count}}</view>
					</view>
					<view class="mt20 flex-box">
						<image src="https://admin.mosizp.cn/static/public/icon_phone_b.png" mode="aspectFill" class="ico24"></image>
						<view class="pl20 flex-grow-1 col3 fs24">{{jobFairs.contact_mobile}}</view>
					</view>
					<view class="right">
						<!-- <image src="https://admin.mosizp.cn/static/public/icon_code.png" mode="aspectFill" class="ico48"></image> -->
						<button hover-class="none" class="ico48 mt10" @click="bindMakeCall()">
							<image :src="iconPath('btn_phone.png')" mode="aspectFill" class="ico48"></image>
						</button>
					</view>
				</view>

				<view class="search_nav flex-box">
					<input type="text" confirm-type="search" placeholder="请输入您感兴趣的企业或者公司" class="flex-grow-1 col3 pr30"
						placeholder-class="cola5" v-model="q" @confirm="search" />
					<image src="https://admin.mosizp.cn/static/public/icon_search1.png" mode="aspectFill" class="ico32" @click="search"></image>
				</view>
				<view class="mt40 tc title">
					<text>招聘大厅</text>
					<image src="https://admin.mosizp.cn/static/public/icon_right.png" mode="aspectFill" class="title_bg"></image>
				</view>
				<view class="pt10">
					<view class="item" v-for="(item,index) in companyList">
						<view class="m-ellipsis-l2 fs28 fwb col3 lh40 h80">{{item.enterprise.company_name}}</view>
						<view class="fs26 lh36 fs26 mt10 m-ellipsis"><text class="col4">{{item.jobs.length}}</text>个在招职位</view>
						<view class="hm">
							<template v-for="(job,jobIndex) in item.jobs">
								<view class="flex-box mt15 fs24 col3" v-if="jobIndex<3">
									<image src="https://admin.mosizp.cn/static/public/icon_true.png" mode="aspectFill" class="ico24"></image>
									<view class="flex-grow-1 plr10 m-ellipsis">{{job.job_name}}</view>
									<view class="size">{{job.salary_text}}</view>
								</view>
							</template>
							
						</view>
						
						<!-- <view class="flex-box mt15 fs24 col3">
							<image src="https://admin.mosizp.cn/static/public/icon_true.png" mode="aspectFill" class="ico24"></image>
							<view class="flex-grow-1 plr10 m-ellipsis">会计</view>
							<view class="size">4K～8K</view>
						</view>
						<view class="flex-box mt15 fs24 col3">
							<image src="https://admin.mosizp.cn/static/public/icon_true.png" mode="aspectFill" class="ico24"></image>
							<view class="flex-grow-1 plr10 m-ellipsis">会计</view>
							<view class="size">4K～8K</view>
						</view> -->
						<view class="btn" @click="bindGoCompany(item.company_id)">查看详情</view>
					</view>
					
					<view class="nothing" v-if="companyMore.nothing">
						<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFit"></image>
						<text>暂无企业信息</text>
					</view>
					<view class="g-btn3-wrap" v-else>
						<view class="g-btn3" style="color: #fff;" @click="fetchCompany()">{{companyMore.text}}</view>
					</view>
					

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				id: 0,
				jobFairs: {
					state_text: '',
					name: '',
					start_date_text: '',
					end_date_text: '',
					company_count: 0,
					job_count: 0,
					contact_mobile: 0
				},
				q: '',
				companyList: [],
				companyMore: {page:1},
				statusBarHeight:0,
				barHeight:0
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			let page = this;
			
			page.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			// #ifdef MP
			const {
				top,
				height
			} = wx.getMenuButtonBoundingClientRect();
			// #endif
			page.barHeight = 44 + page.statusBarHeight;
			this.id = options.id;
			this.fetchFairsDetail();
			this.fetchCompany();
		},
		onReachBottom() {
			this.fetchCompany();
		},
		methods: {
			fetchFairsDetail(){
				this.$core.get({url: '/xilujob.job_fairs/detail',data: {
						fairs_id: this.id
					},
					success: ret => {
						this.jobFairs = ret.data;
					},
					fail: ret => {
						uni.showModal({
							title: '提示',
							content: ret.msg,
							showCancel: false,
							success(res) {
								uni.navigateBack();
							}
						});
						return false;
					}
				});
			},
			search(){
				this.companyList = [];
				this.companyMore = {page: 1};
				this.fetchCompany();
			},
			fetchCompany(){
				  this.$util.fetch(this, 'xilujob.job_fairs/fairs_company', {q: this.q,fairs_id: this.id,pagesize:10}, 'companyMore', 'companyList', 'data', 'unique');
			},
			//打电话
			bindMakeCall(){
				uni.makePhoneCall({
					phoneNumber: this.jobFairs.contact_mobile
				})
			},
			//企业主页
			bindGoCompany(id) {
			    uni.navigateTo({url: '/pages/user/company_info?id='+id});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: var(--primary);
	}

	.bg {
		width: 100%;
		height: 480rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.pt200 {
		padding-top: 200rpx;
	}

	.top_item {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 25rpx 30rpx 35rpx;
		position: relative;

		.right {
			position: absolute;
			right: 34rpx;
			bottom: 30rpx;
		}

		&+& {
			margin-top: 20rpx;
		}

		.tips {
			width: 135rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
			display: inline-block;
			vertical-align: top;
			margin-right: 20rpx;
			background: #FF9A19;
			border-radius: 25rpx;
		}
	}

	.search_nav {
		width: 690rpx;
		height: 86rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		margin-top: 30rpx;
		padding: 0 30rpx;
	}

	.title {
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		height: 50rpx;
		position: relative;

		&_bg {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			width: 390rpx;
			height: 12rpx;
		}
	}

	.item {
		width: 335rpx;
		height: 430rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		display: inline-block;
		margin-top: 20rpx;
		margin-right: 20rpx;
		padding: 30rpx;
		vertical-align: top;

		&:nth-of-type(2n) {
			margin-right: 0;
		}

		.h80 {
			height: 80rpx;
		}

		.size {
			font-size: 22rpx;
			color: var(--primary);
			font-weight: bold;
			min-width: 131rpx;
			padding: 0 5rpx;
			height: 38rpx;
			line-height: 38rpx;
			text-align: center;
			background: var(--primary1);
			border-radius: 19rpx;
			
		}

		.btn {
			width: 264rpx;
			height: 62rpx;
			line-height: calc(62rpx - 2px);
			text-align: center;
			font-weight: bold;
			font-size: 24rpx;
			color: var(--primary);
			border-radius: 8rpx;
			border: 1px solid var(--primary);
			margin-left: auto;
			margin-right: auto;
			margin-top: 20rpx;
		}
	}
	.hm{height: 150rpx;}
</style>